<script setup>
import { ref } from "vue";
import { Delete, Edit, Plus } from "@element-plus/icons-vue";

import { getScripts, removeScript } from "@/api/script";
import InterfaceDetail from "./components/InterfaceDetail.vue";
import { ElMessage, ElMessageBox } from "element-plus";

const detailVisible = ref(false)
const editedScript = ref(null)

function toCreateScript() {
  editedScript.value = null
  detailVisible.value = true
}

const scripts = ref([])
function toGetScripts() {
  getScripts().then(res => {
    if (res.code === 200) {
      editedScript.value = null
      scripts.value = res.data
    }
  })
}
toGetScripts()

function toEditScript(scriptName) {
  editedScript.value = scriptName
  detailVisible.value = true
}

function toDeleteScript(scriptName) {
  ElMessageBox.confirm(`确认删除 ${scriptName} 吗？`, "警告", {
    type: "warning",
    confirmButtonText: "确定",
    cancelButtonText: "取消"
  }).then(() => {
    removeScript(scriptName).then(res => {
      if (res.code === 200) {
        detailVisible.value = false
        ElMessage.success("删除成功")
        toGetScripts()
      } else {
        ElMessage.error(res.msg)
      }
    }).catch(err => {
      console.log(err)
      ElMessage.error("网络异常，请稍后重试")
    })
  }).catch(() => {})
}
</script>

<template>
  <el-card>
    <template #header>
      <div class="card-header">
        <div class="title">接口列表</div>
        <div class="extra">
          <el-button
            text type="primary" :icon="Plus"
            @click="toCreateScript"
          >新增接口</el-button>
        </div>
      </div>
    </template>
    <el-row :gutter="20">
      <el-table :data="scripts" border>
        <el-table-column prop="name" label="接口名称" width="180px" show-overflow-tooltip />
        <el-table-column prop="args" label="参数类型" width="100px">
          <template #default="{ row }">
            <el-tag class="tag-item" v-if="row.args === 1">设备信息</el-tag>
            <el-tag class="tag-item" v-if="row.args === 2" type="success">网关信息</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="devices" label="采集方式" width="100px">
          <template #default="{ row }">
            <el-tag class="tag-item" v-if="row.mode === 'polling'" type="info">轮询</el-tag>
            <el-tag class="tag-item" v-if="row.mode === 'interval'">定时触发</el-tag>
            <el-tag class="tag-item" v-if="row.mode === 'advanced'" type="success">高级定时</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="devices" label="关联设备">
          <template #default="{ row }">
            <el-tag class="tag-item" v-for="item in row.devices" type="success">{{ item.name }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="mqttClients" label="输出客户端">
          <template #default="{ row }">
            <el-tag class="tag-item" v-for="item in row.mqttClients">{{ item }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="156px">
          <template #default="{ row }">
            <el-button 
              link size="small" type="primary" 
              :icon="Edit"
              @click="toEditScript(row.name)"
            >详 情</el-button>
            <el-button
              link size="small" type="danger" 
              :icon="Delete"
              @click="toDeleteScript(row.name)"
            >删 除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </el-card>
  <InterfaceDetail 
    v-model:visible="detailVisible" :name="editedScript" 
    @submit="toGetScripts()"
  />
</template>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  .extra {
    display: flex;
    justify-content: center;
  }
}
.tag-item {
  margin-right: 8px;
}
</style>